<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>添加角色</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/admin.css"/>
    <link rel="stylesheet" type="text/css" href="../css/lift.css">
    <style>
    .layui-form{
      width: 275px;
      height:185px;
      margin:0 auto;
        }
    .add-name th{
        width:100px;
        height:40px;
        font-size:14px;
        padding: 0;
        vertical-align: middle;
        }
    .add-name input{
        outline:none;
        width:160px;
        height: 28px;
        border:1px solid #E5BA70;
        border-radius:5px;
      }
    .tianjia-checkBox th{
      width:100px;
      height:40px;
      font-size:14px;
      padding-top:10px;
      vertical-align: top;
      }
      tr.tianjia-checkBox td input{
      display: inline-block;
      }
    .layui-form .layui-table{
      margin-top:50px;
      margin:0 auto;
    }
    .layui-form #role_name{
      width:145px;
      height:25px;
       border-radius:5px;
       border:1px solid #888;
       display:inline-block;
    }
     .layui-input-block  span{
      font-size: 14px;
    }
    .layui-input-block th{
       font-size: 14px;
    }
    #btn-c,#btn-s{
      border:0;
      margin-top: 3px;
      width: 90px;
      height: 28px;
      border-radius:5px;
      background-color: #D8D8D8;
    }
    #btn-c{
       margin-left:70px;
    }
    #btn-s:hover,#btn-c:hover{
      color:#fff;
     background-color:#EF7632;
    }
    #btn-s{
      margin-left:15px;
    }
    .layui-layer .layui-layer-title{
      background-color: #fff;
    }
    .layui-form-checkbox{
      padding:0;
    }
  /*  复选框样式 */
    .layui-form-checkbox span, .layui-form-checked:hover span{
      color:#333;
      margin-left:30px;
      margin-bottom:10px;
      font-size:16px;
      background-color:#fff;
    }
    .layui-form .layui-table-add{
      margin-left:40px;
    }
    .layui-form-checked[lay-skin=primary] i{
      border:1px solid #FABB42;
      background-color:#FABB42;
    }
    </style>
</head>
<body>
     <form class="layui-form" action="">
     <h3 style="display:inline-block">角色名称&emsp;</h3>
     <input type="text" id="role_name" value="" onfocus="this.style.color='#777';
      this.value='';"  onblur="this.style.color='#777';  this.value=this.value"   />
      <h3 >所属权限:&emsp;</h3>
            <table class="layui-table layui-table-add" lay-skin="nob">
              <tbody class="qx">
              <th class="check"></th>
              </tbody>
            </table>
          <input type="button" id="btn-c" value="取消">
          <input type="button" id="btn-s" value="保存">
        </form>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script>
          layui.use(['jquery','form','upload','layer'], function(){

          var layer = layui.layer;
          var $ = layui.jquery;
          var form = layui.form();
//获取权限列表
          $.ajax({
              url: '../../role_manage/getWuyePower',
              type: 'get',
              dataType: 'json',
              data: {},
            })
            .done(function(response){
                  console.log("limitlist",response);

          if(response.resultCode == 200){
             console.log("getWuyePower success");

          var str= '';
          if(response.powers.length){

            for(var i=0;i<response.powers.length;i++){
            str +=
             '<tr data-id="'+response.powers[i].power_id+'">'+
            '<td class="check"><input data-id="'
            +response.powers[i].power_id+'"  type="checkbox"  name="items" title="'
            +response.powers[i].power_description+'"   value="'
            +response.powers[i].power_description+'"  lay-skin="line"></td>'+
            '</tr>'
          }
          $(".qx").html(str);
           form.render();
          }
          }
        })
        .fail(function(response){
            console.log(response);
            if(response.resultCode=='001'){
            console.log("getWuyePower success");
            }
        })

//角色管理
    $("#btn-s").off("click","#btn-s").on("click",function(){

          var role_name = $("#role_name").val();
              console.log(role_name);
           var power_description= $("input[name='items']:checked").attr("title");
              console.log('power_description',power_description);

          var it_value = [];//选中的数组
          $("input[name='items']:checked").each(function() {
              it_value.push($(this).val());
          });
              console.log(it_value.length==0 ? '你还没有选择任何内容':it_value);

          localStorage.setItem("role_Arr", it_value);

          var  it_Id = [];
          $("input[name='items']:checked").each(function() {
              it_Id.push($(this).data("id"));
          });
            console.log(it_Id.length==0 ? '你还没有选择任何内容':it_Id);
       if(role_name){
             $.ajax({
                url: '../../role_manage/addRole',
                traditional: true,
                type: 'POST',
                dataType: "json",
                data:{
                  role_name:role_name,
                  power_id:it_Id,
                },
           })
           .done(function(response){
                 console.log(response);
               alert("添加成功");
               window.parent.location.reload();
               var index=parent.layer.getFrameIndex(window.name);
               parent.layer.close(index);
             if(response.resultCode == '200'){
                 console.log("addrole success");
            }
          })
          .fail(function(response){
              console.log(response);
              alert("添加失败");
              window.parent.location.reload();
              var index=parent.layer.getFrameIndex(window.name);
              parent.layer.close(index);
              if(response.resultCode=='001'){
                console.log("param is not found");
                }
            })
      }
      })
          $("#btn-c").click(function(){
           window.parent.location.reload();
          var index=parent.layer.getFrameIndex(window.name);
             parent.layer.close(index);
            })
                 });
    </script>
</body>
</html>
